<!--  -->
<template>
  <div class="container">
      <div class="left_header">
          <!-- 返回图标 -->
         <i class="iconfont icon-fanhui"></i>
      </div>
      <div class="center_header">
          <!-- 放大镜图标 -->
          <i class="iconfont icon-sousuo" style="padding-left: 0.1rem"></i>
          输入城市/景点/游玩主题
      </div>
      <div class="right_header">
          北京<!-- 向下箭头 --><i class="iconfont icon-xiajiantou" ></i>
      </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    };
  },

 
}

</script>

<style lang="less" scoped>
    @import "~css/var.less";

    .container{
        width: 100%;
        height: 0.88rem;
        background-color: @bgColor;
        color: @textColor;
        font-size: 0.32rem;
        line-height: 0.88rem;
        display: flex;
    }
    .left_header{
        padding: 0 0.2rem;
        text-align: center;
        font-weight: 700;
    }
    .center_header{
        flex: 1;
        background-color: #fff;
        height: 0.6rem;
        margin: 0.12rem 0;
        border-radius: 0.1rem;
        color: #e4e7ea;
        line-height: .6rem;
        font-size: .28rem;
    }
    .right_header{
        font-size: .28rem;
        padding: 0 .2rem;
    }
</style>